import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button, Form,Row,InputNumber, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import '../less/paybill.less';

const columns = [{
  title: '续费项目',
  dataIndex: 'project',
}, {
  title: '开始时间',
  dataIndex: 'startTime',
}, {
  title: '数量',
  dataIndex: 'number',
}, {
  title: '单价',
  dataIndex: 'price',
}, {
  title: '结束时间',
  dataIndex: 'endTime',
}, {
  title: '下次缴费',
  dataIndex: 'nextTime',
}, {
  title: '单项小计',
  dataIndex: 'unit',
}, {
  title: '备注',
  dataIndex: 'remark'
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    index:i+1,
    number: i+1,
    price:1.15,
    project:'物业费',
    unit:i*Math.random().toFixed(2),
    startTime:'2016-10-25',
    nextTime:'2016-10-16',
    endTime:'2016-10-16',
    remark:'哈哈测试拉'
  });
}

const dataSource2 = [{
  key: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
}, {
  key: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  key: '3',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  key: '4',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}];

const columns2 = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '住址',
  dataIndex: 'address',
  key: 'address',
}];

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

const rowSelection = {
  onChange(selectedRowKeys, selectedRows) {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect(record, selected, selectedRows) {
    console.log(record, selected, selectedRows);
  },
  onSelectAll(selected, selectedRows, changeRows) {
    console.log(selected, selectedRows, changeRows);
  },
};

class PayTimeRecord extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {

  }
  render() {
    return (
      <div className="ptrContainer">
          <Row>
            <Col span={16}>
                <div className="ptrHead">
                    房号：彼岸－13-9-9-2
                </div>
                <div className="ptrTable">
                  <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={pagination}/>
                </div>
            </Col>
            <Col span={8} style={{paddingLeft:20}}>
              <div className="ptrHead">
                  付款信息
                  <Button onClick={()=>{
                      this.props.changeAdd(true);
                  }} type="ghost" style={{float:'right',marginTop:-5}}>返回</Button>
              </div>
              <div className="ptrSubHead">
                  催费信息
              </div>
              <div className="ptrForm">
                <Form horizontal className="ant-advanced-search-formT">
                <Row gutter={16}>
                  <Col sm={24}>
                    <FormItem
                      label="缴费单号"
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 14 }}
                    >
                      <Input placeholder="请输入缴费单号" size="default" />
                    </FormItem>
                    <FormItem
                      label="业主"
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 14 }}
                    >
                      <Input placeholder="请输入业主" size="default" />
                    </FormItem>
                    <FormItem
                      label="经办人"
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 14 }}
                    >
                      <Input placeholder="请输入经办人" size="default" />
                    </FormItem>
                    <FormItem
                      label="合计金额"
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 14 }}
                    >
                      <InputNumber placeholder="请输入合计金额" step={0.01} />
                    </FormItem>
                    <FormItem
                      label="创建时间"
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 14 }}
                    >
                      <DatePicker />
                    </FormItem>
                  </Col>
                </Row>
                </Form>
              </div>
              <div className="ptrBtn">
                <Button type="ghost">取消</Button>
                <Button type="ghost" style={{marginLeft:10}}>保存</Button>
                <Button type="primary" style={{marginLeft:10}}>保存</Button>
              </div>

              <div className="ptrHistory">
                  <div className="ptrHead">
                      付款信息
                  </div>
                  <Table dataSource={dataSource2} columns={columns2} pagination={false}/>
              </div>
            </Col>
          </Row>
      </div>
    );
  }
}

export default PayTimeRecord
